<template>
  <rt-view class="rt-view">
    <rt-header>
      <rt-navbar :onBack="closePage">
        <span>分类</span>
      </rt-navbar>
    </rt-header>
    <rt-content>
      <div class="type-content">
        <div class="my-class">
          <h4>我的分类</h4>
          <span>点击进入编辑分类</span>
          <div class="but">
            <rt-button class="button" v-if="!isEditor" type="sub" plain @click="savaType()"
              >完成</rt-button
            >
            <rt-button class="button" v-if="isEditor" type="sub" plain @click="editorType()"
              >编辑</rt-button
            >
          </div>
        </div>
        <div class="my-content">
          <div v-if="isEditor">
            <div
              v-for="option in defaultOptions"
              :key="option.name"
              class="common"
            >
              {{ option.name }}
            </div>
            <div
              v-for="option in myTypeOptions"
              :key="option.name"
              class="common"
            >
              {{ option.name }}
            </div>
          </div>
          <div v-if="!isEditor">
            <div
              v-for="option in defaultOptions"
              :key="option.name"
              class="default-editor"
            >
              {{ option.name }}
            </div>
            <div
              class="editor"
              v-for="option in myTypeOptions"
              :key="option.name"
              v-dragging="{
                item: option,
                list: myTypeOptions,
                group: 'option',
                otherData: otherData,
                comb: 'isComb'
              }"
              @click="deleteType(option)"
            >
              {{ option.name
              }}<img
                v-if="!(option.isSystem == true)"
                src="../../assets/icons/svgs/class-delete.svg"
              />
            </div>
          </div>
        </div>
        <div v-if="moreType" class="my-class">
          <h4>更多分类</h4>
          <span>点击添加分类</span>
        </div>
        <div class="my-content">
          <div v-if="isEditor">
            <div
              v-for="(option, index) in typeOptions"
              :key="index"
              class="common"
            >
              <span>{{ option.name }}</span>
            </div>
          </div>
          <div v-if="!isEditor">
            <div
              v-for="(option, index) in typeOptions"
              :key="index"
              class="add"
              @click="addType(option)"
            >
              <img src="../../assets/icons/svgs/class-add.svg" />{{
                option.name
              }}
            </div>
          </div>
        </div>
      </div>
    </rt-content>
  </rt-view>
</template>

<script>
export default {
  data() {
    return {
      isEditor: true,
      defaultOptions: [],
      myTypeOptions: [],
      typeOptions: []
    };
  },
  computed: {
    moreType() {
      if(this.typeOptions.length > 0) return true;
      return false;
    }
  },
  mounted() {
    this.getAllType();
  },
  methods: {
    closePage() {
      this.savaType();
      this.$router.replace({
        name: 'article-page'
      });
      // alert(123);
    },
    getAllType() {
      rt.post('/api/bbs/myarticletype/getalltype')
        .then(res => {
          this.defaultOptions = res.defaultList;
          this.myTypeOptions = res.myList;
          this.typeOptions = res.moreList;
        })
        .catch(error => {
          rt.showErrorToast(error);
        });
    },
    otherData(val) {
      console.log(1);
      return true;
    },
    isComb(val) {
      console.log(2);
      return false;
    },
    editorType() {
      this.isEditor = !this.isEditor;
    },
    savaType() {
      var param = [];
      var myOptions = this.myTypeOptions;
      for (var i = 0; i < myOptions.length; i++) {
        var df = {
          id: myOptions[i].typeId,
          seq: i + 1
        };
        param.push(df);
      }
      rt.post('/api/bbs/myarticletype/savetype', param)
        .then(res => {
          console.log(res);
        })
        .catch(error => {
          rt.showErrorToast(error);
        });
      this.isEditor = !this.isEditor;
    },
    deleteType(val) {
      if (val.isSystem) {
        return;
      } else {
        var arr = this.myTypeOptions;
        var index = -1;
        for (var i = 0; i < arr.length; i++) {
          if (val == arr[i]) index = i;
        }
        if (index !== -1) {
          this.myTypeOptions.splice(index, 1);
        }
        // this.myTypeOptions.remove(val);
        this.typeOptions.push(val);
      }
    },
    addType(val) {
      this.myTypeOptions.push(val);
      var arr = this.typeOptions;
      var index = -1;
      for (var i = 0; i < arr.length; i++) {
        if (val == arr[i]) index = i;
      }
      if (index !== -1) {
        this.typeOptions.splice(index, 1);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.rt-view {
  background: #fff;
  .type-content {
    width: 95%;
    margin: 0px auto;
    padding-top: 20px;
    border-top: 1px silver solid rgba(100, 200, 200, 0.25);
    .my-class {
      line-height: 100%;
      h4 {
        display: inline-block;
        margin-left: 4px;
        padding-right: 5px;
      }
      span {
        display: inline-block;
        margin-top: 1px;
        font-size: 10pt;
        color: #888888;
      }
      .but {
        margin-top: -8px;
        float: right;
        padding-right: 4px;
      }
    }
    .my-content {
      width: 100%;
      margin: 20px auto;
      div {
        .common {
          font-size: 10pt;
          display: inline-block;
          margin: 8px 4px;
          background: #eaeef5;
          width: 30.99%;
          line-height: 245%;
          height: 32px;
          text-align: center;
          border-radius: 2px;
        }
        .default-editor {
          font-size: 10pt;
          color: #888888;
          display: inline-block;
          margin: 8px 4px;
          background: #eaeef5;
          width: 30.99%;
          line-height: 245%;
          height: 32px;
          text-align: center;
          border-radius: 2px;
          box-sizing: border-box;
        }
        .editor {
          font-size: 10pt;
          display: inline-block;
          margin: 8px 4px;
          background: #eaeef5;
          width: 30.99%;
          line-height: 245%;
          height: 32px;
          text-align: center;
          border-radius: 2px;
          box-sizing: border-box;
          position: relative;
          img {
            width: 15px;
            position: absolute;
            top: -5px;
            right: -5px;
          }
        }
        .add {
          display: inline-block;
          margin: 8px 4px;
          background: #eaeef5;
          width: 30.99%;
          line-height: 245%;
          height: 32px;
          text-align: center;
          border-radius: 2px;
          font-size: 10pt;
          box-sizing: border-box;
          img {
            display: inline-block;
            padding-top: 5px;
            padding-right: 8px;
            width: 10px;
          }
        }
      }
    }
  }
}
.button{
  border-radius: 5px;
  background: #fff;
  width: 64px;
  height: 28px;
}
.rt-btn::before{
  border-radius: 10px;
}
</style>
